<template>
    <div>
        <template v-if="list.length==0">
            <el-empty description="你还没有添加购物车"></el-empty>
        </template>
        <template v-else>
            <div>
                {{pre}}
                <div v-for="item in list" :key="item.Id">
                    <input type="checkbox" v-model="pre" @change="chang" :name="item.Id" :value="item.Id">

                    <button @click="AddCart(item.Id)">+</button>
                    <span>数量：{{item.count}}</span>
                    <button @click="RemoveCart(item.Id,item.count)">-</button>
                    <span>{{item.priceStr*item.count}}</span>
                    <span>去支付{{}}</span>

                </div>
                <h2>
                    全选：<input v-model="boo" @change="all" type="checkbox">
                    <span>总计：{{sum}}</span>
                    <button>付款</button>
                </h2>
                {{sum}}
            </div>
        </template>
    </div>
</template>

<script>
export default {
    props: {},
    data() {
        return {
            pre: [],
            NUM: 123,
            boo: false,
            // sum: 0,
            list: [],
        };
    },
    created() {
        this.Getlist();
    },
    computed: {
        sum() {
            let All = 0
            this.pre.forEach(item=>{
                // console.log(item);
                this.list.forEach(i=>{
                    // console.log(i.Id);
                    if (i.Id==item) {
                        All+=i.priceStr*i.count
                    }
                })
            })
            return All
        },
    },
    methods: {
        chang() {
            if (this.list.length == this.pre.length) {
                this.boo = true;
            } else {
                this.boo = false;
            }
        },
        all() {
            // console.log(val);
            if (this.boo) {
                this.list.forEach((element) => {
                    this.pre.push(element.Id);
                });
            } else {
                this.pre = [];
            }
        },
        async AddCart(goodId) {
            await this.$API.DetailAPI.GetAddCart({
                goodId,
                token: localStorage.token,
            });
            this.Getlist();
        },
        async RemoveCart(goodId, count) {
            if (count > 1) {
                await this.$API.DetailAPI.GetRemoveCart({
                    goodId,
                    token: localStorage.token,
                });
                this.Getlist();
            } else {
                await this.$API.DetailAPI.GetDelCart({
                    goodId,
                    token: localStorage.token,
                });
                this.Getlist();
            }
        },
        async Getlist() {
            let data = await this.$API.CartAPI.GetDetailId({
                token: localStorage.token,
            });
            this.list = data;
        },
    },
};
</script>

<style>
</style>